<template>
  <div class="about">
       <!-- <div v-if="showInput">
           <my-input></my-input>
       </div>
       <div v-else>
           <my-header></my-header>
       </div> -->
       <keep-alive>
          <component :is="inputName"></component>
       </keep-alive>
       <!-- <button @click="showInput = !showInput">切换组件</button> -->
       <button @click="cut">切换组件</button>
  </div>
</template>
<script>
import myInput from '../components/myInput'
import myHeader from '../components/myInput2'
export default {
    data() {
        return {
            showInput:true,
            inputName:'myInput'
        }
    },
    components:{
        myInput,
        myHeader

    },
    methods: {
        cut(){
           this.inputName = this.inputName == 'myInput'?'myHeader':'myInput'
        }
    },
}
</script>
